<script setup>
import { ref } from 'vue'
import {
  Search,
  Service,
  ShoppingCartFull,
  Location,
  UserFilled
} from '@element-plus/icons-vue'
import { 
  Dialog as TDialog
} from 'tdesign-vue-next';
import {
  Chat as TChat,
  ChatContent as TChatContent,
  ChatInput as TChatInput
} from '@tdesign-vue-next/chat';
import { useUserStore } from '@/stores'
import { useRouter } from 'vue-router'
import { productGetListService } from '@/api/product';
import { marketplaceGetHomeDataService } from '@/api/marketplace';
import { aiCustomerChatService } from '@/api/ai';

const router = useRouter();
const userStore = useUserStore();

const showServiceDialog = ref(false);
const showAddressDialog = ref(false);

// 获取用户基本数据
const basicDataModel = ref({
  cartItemCount: 0,
  isMerchant: false
})
const getBasicData = async () => {
  const res = await marketplaceGetHomeDataService();
  basicDataModel.value = res.data.data;
}
getBasicData();

// 商品数据
const goodsList = ref([
  // { productId: 1, title: '潮流卫衣', price: 199, salesVolume: 1200, coverUrl: 'https://dummyimage.com/300x300' }
])

const getGoodsList = async () => {
  const res = await productGetListService();
  goodsList.value.push(...res.data.data);
}
getGoodsList();

// 轮播图数据
const carouselItems = ref([
  { id: 1, img: 'https://dummyimage.com/1920x600' },
  { id: 2, img: 'https://dummyimage.com/1920x600' },
  { id: 3, img: 'https://dummyimage.com/1920x600' }
])

/* 客服 */
const chatList = ref([]);
const loading = ref(false);

const inputEnter = async (msg) => {
  chatList.value.unshift({role: 'user', content: msg});
  chatList.value.unshift({role: 'assistant'});
  loading.value = true;
  try {
    const response = (await aiCustomerChatService(msg)).data.data;
    chatList.value[0].content = response;
  } finally {
    loading.value = false;
  }
}


</script>

<template>
  <div class="home-container">
    <el-header>
      <img class="el-header__logo" src="/src/assets/YH_logo.png" @click="router.push('/')">
      <el-input class="el-header__input">
        <template #append>
          <el-button class="el-header__search-button" :icon="Search" />
        </template>
      </el-input>

      <div class="el-header__right">
        <el-icon class="right-item" @click="showServiceDialog = true">
          <div class="right-item-inner-container">
            <el-icon class="right-item-icon"><Service /></el-icon>
            <div class="right-item-text">客服</div>
          </div>
        </el-icon>
        <t-dialog
          style="position: absolute;"
          v-model:visible="showServiceDialog"
          :footer="false"
          header="智能客服"
          mode="modeless"
          draggable
        >
          <t-chat
            style="height: 600px"
            :data="chatList"
            :text-loading="loading"
            :clearHistory="false"
          >

            <template #content="{ item, index }" >
              <div>
                <t-chat-content :content="item.content"/>
              </div>
            </template>

            <template #footer>
              <t-chat-input :stop-disabled="loading" @send="inputEnter"> </t-chat-input>
            </template>
          </t-chat>
        </t-dialog>

        <el-icon class="right-item" @click="showAddressDialog = true">
          <div class="right-item-inner-container">
            <el-icon class="right-item-icon"><Location /></el-icon>
            <div class="right-item-text">地址</div>
          </div>
          <AddressDialog v-model="showAddressDialog" />
        </el-icon>
        <el-icon class="right-item" @click="router.push('/shoppingcart')">
          <div class="right-item-inner-container">
            <el-icon class="right-item-icon"><ShoppingCartFull /></el-icon>
            <div class="right-item-text">购物车</div>
          </div>
        </el-icon>
        <el-icon class="right-item" @click="router.push('/unpaid')">
          <div class="right-item-inner-container">
            <el-icon class="right-item-icon">
              <svg t="1747920908951" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5618" width="200" height="200"><path d="M837.174987 152.628166 183.77249 152.628166c-66.052368 0-119.79027 53.748135-119.79027 119.79027L63.98222 751.58054c0 66.042135 53.737902 119.79027 119.79027 119.79027l653.402497 0c66.052368 0 119.79027-53.748135 119.79027-119.79027L956.965258 272.418436C956.965258 206.376301 903.227356 152.628166 837.174987 152.628166zM891.62511 588.230172 652.043546 588.230172c-42.028209 0-76.230172-34.201963-76.230172-76.230172s34.201963-76.230172 76.230172-76.230172l239.581564 0L891.62511 588.230172zM891.62511 370.429681 652.043546 370.429681c-78.059843 0-141.570319 63.511499-141.570319 141.570319s63.511499 141.570319 141.570319 141.570319l239.581564 0 0 98.010221c0 30.033014-24.428366 54.450123-54.450123 54.450123L183.77249 806.030663c-30.021757 0-54.450123-24.417109-54.450123-54.450123L129.322367 272.418436c0-30.033014 24.428366-54.450123 54.450123-54.450123l653.402497 0c30.021757 0 54.450123 24.417109 54.450123 54.450123L891.62511 370.429681zM619.373473 512c0 24.057929 19.50217 43.560098 43.560098 43.560098 24.057929 0 43.560098-19.50217 43.560098-43.560098s-19.50217-43.560098-43.560098-43.560098C638.876666 468.439902 619.373473 487.942071 619.373473 512z" fill="currentColor" p-id="5619"></path></svg>
            </el-icon>
            <div class="right-item-text">待付款</div>
          </div>
        </el-icon>
        <el-icon class="right-item" @click="router.push('/creator')">
          <div class="right-item-inner-container">
            <el-icon class="right-item-icon">
              <svg t="1747921400087" class="icon" viewBox="0 0 1068 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7544" width="200" height="200"><path d="M92.67826045 321.94347823l0.31304356-0.86086935 77.32173954-184.10869599A109.56521778 109.56521778 0 0 1 271.30869599 69.82608711h520.51304356a109.56521778 109.56521778 0 0 1 100.99565157 67.14782578l77.32173955 184.10869599 0.54782578 1.33043468c1.95652177 4.06956533 3.05217422 8.64782578 3.05217422 13.49999999v465.65217423a148.69565244 148.69565244 0 0 1-148.69565244 148.69565156h-586.95652179a148.69565244 148.69565244 0 0 1-148.69565243-148.69565156v-92.93478311a31.89130401 31.89130401 0 0 1 0-1.76086934v-189.9V335.91304356c0-5.00869599 1.17391289-9.78260888 3.28695644-13.96956534zM152 367.21739112v339.65217421a31.89130401 31.89130401 0 0 1 0 1.76086934V801.56521778a86.08695645 86.08695645 0 0 0 86.08695645 86.08695644h586.95652177a86.08695645 86.08695645 0 0 0 86.08695645-86.08695645V367.21739112H152z m743.32173955-62.60869513l-60.22173955-143.41304355a46.95652177 46.95652177 0 0 0-43.27826045-28.76087022H271.30869599a46.95652177 46.95652177 0 0 0-43.27826132 28.76087022L167.76956533 304.60869599h727.55217422z" p-id="7545"></path><path d="M358.72608711 617.14347823a31.30434756 31.30434756 0 1 0-45.62608711 42.84782578l100.09565244 106.70869599a39.13043467 39.13043467 0 0 0 54.31304355 2.66086933l280.33043468-245.4260871a31.30434756 31.30434756 0 0 0-41.24347823-47.11304268l-263.26956533 230.47826045-84.6-90.15652178z" fill="currentColor" p-id="7546"></path></svg>
            </el-icon>
            <div class="right-item-text">待收货</div>
          </div>
        </el-icon>
        <el-icon class="right-item" @click="router.push('/merchant/join')" v-if="!basicDataModel.isMerchant">
          <div class="right-item-inner-container">
            <el-icon class="right-item-icon">
              <svg t="1748076772459" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2847" width="200" height="200"><path d="M829.220317 124.424824l-7.074116-10.656711L211.680609 113.768113l-7.141654 9.141194C48.983109 321.498248 70.507332 442.416202 97.154225 496.860185c26.740014 54.537104 80.878029 89.831958 137.977491 89.831958l5.146207 0c72.043826-2.867304 119.953999-38.642089 145.190777-64.548108 22.793122 25.90602 65.699328 60.541865 132.855844 60.541865 70.02382 0 113.703645-37.70167 135.579885-63.877843 30.546713 24.907273 90.183975 65.721841 152.687518 65.721841 40.980343 0 76.085886-16.799618 104.681154-49.907667C1017.364371 411.082566 836.949348 136.066979 829.220317 124.424824zM874.641809 503.603773c-19.22383 22.49841-41.49916 33.236985-68.14503 33.236985-60.246129 0-122.821303-54.56064-136.7792-67.51979L669.717579 305.754682c0.023536-0.458441 0.258896-0.799202 0.258896-1.245364 0-13.252839-10.714016-23.967878-23.920806-23.967878-13.227256 0-23.919782 10.715039-23.919782 23.967878l-0.258896 0 0 177.851641c-13.063527 17.811668-46.172599 52.634778-103.552447 52.634778-64.784492 0-98.525967-44.292785-107.666138-58.367339l0-172.120103c0-13.252839-10.715039-23.967878-23.898293-23.967878-13.228279 0-23.943318 10.715039-23.943318 23.967878l0 171.250292c-11.725042 15.249309-52.070936 60.389392-124.465756 63.37233l-3.219321 0 0-0.047072c-31.933293 0-73.688279-19.585057-95.000678-63.232137-21.358447-43.540655-36.843116-141.948943 94.953605-314.397526l561.097208 0C845.996398 240.173035 940.480306 427.225221 874.641809 503.603773zM831.288418 613.83227c-13.277398 0-24.086581 10.761088-24.13263 24.037463l0 0.045025c0 0.048095 0 0.048095 0 0.095167 0 0 0 0.023536 0 0.059352l0 173.505659c0 26.693965-21.641903 48.312332-48.263214 48.312332L552.089555 859.887268c-0.022513 0-0.022513 0-0.046049 0L264.081049 859.887268c-26.623357 0-48.26526-21.618367-48.26526-48.312332l0-173.634596c-0.023536-13.323447-10.80816-24.108071-24.109094-24.108071-13.299911 0-24.084535 10.784624-24.131607 24.108071l0 178.452321c0 50.730405 41.026392 91.804892 91.664699 91.804892l504.492002 0c50.637284 0 91.662653-41.074487 91.662653-91.804892L855.394443 637.869732C855.325881 624.592334 844.562746 613.83227 831.288418 613.83227z" fill="currentColor" p-id="2848"></path></svg>
            </el-icon>
            <div class="right-item-text">我要开店</div>
          </div>
        </el-icon>
        <el-icon class="right-item" @click="router.push('/merchant/self')" v-if="basicDataModel.isMerchant">
          <div class="right-item-inner-container">
            <el-icon class="right-item-icon">
              <svg t="1748076772459" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2847" width="200" height="200"><path d="M829.220317 124.424824l-7.074116-10.656711L211.680609 113.768113l-7.141654 9.141194C48.983109 321.498248 70.507332 442.416202 97.154225 496.860185c26.740014 54.537104 80.878029 89.831958 137.977491 89.831958l5.146207 0c72.043826-2.867304 119.953999-38.642089 145.190777-64.548108 22.793122 25.90602 65.699328 60.541865 132.855844 60.541865 70.02382 0 113.703645-37.70167 135.579885-63.877843 30.546713 24.907273 90.183975 65.721841 152.687518 65.721841 40.980343 0 76.085886-16.799618 104.681154-49.907667C1017.364371 411.082566 836.949348 136.066979 829.220317 124.424824zM874.641809 503.603773c-19.22383 22.49841-41.49916 33.236985-68.14503 33.236985-60.246129 0-122.821303-54.56064-136.7792-67.51979L669.717579 305.754682c0.023536-0.458441 0.258896-0.799202 0.258896-1.245364 0-13.252839-10.714016-23.967878-23.920806-23.967878-13.227256 0-23.919782 10.715039-23.919782 23.967878l-0.258896 0 0 177.851641c-13.063527 17.811668-46.172599 52.634778-103.552447 52.634778-64.784492 0-98.525967-44.292785-107.666138-58.367339l0-172.120103c0-13.252839-10.715039-23.967878-23.898293-23.967878-13.228279 0-23.943318 10.715039-23.943318 23.967878l0 171.250292c-11.725042 15.249309-52.070936 60.389392-124.465756 63.37233l-3.219321 0 0-0.047072c-31.933293 0-73.688279-19.585057-95.000678-63.232137-21.358447-43.540655-36.843116-141.948943 94.953605-314.397526l561.097208 0C845.996398 240.173035 940.480306 427.225221 874.641809 503.603773zM831.288418 613.83227c-13.277398 0-24.086581 10.761088-24.13263 24.037463l0 0.045025c0 0.048095 0 0.048095 0 0.095167 0 0 0 0.023536 0 0.059352l0 173.505659c0 26.693965-21.641903 48.312332-48.263214 48.312332L552.089555 859.887268c-0.022513 0-0.022513 0-0.046049 0L264.081049 859.887268c-26.623357 0-48.26526-21.618367-48.26526-48.312332l0-173.634596c-0.023536-13.323447-10.80816-24.108071-24.109094-24.108071-13.299911 0-24.084535 10.784624-24.131607 24.108071l0 178.452321c0 50.730405 41.026392 91.804892 91.664699 91.804892l504.492002 0c50.637284 0 91.662653-41.074487 91.662653-91.804892L855.394443 637.869732C855.325881 624.592334 844.562746 613.83227 831.288418 613.83227z" fill="currentColor" p-id="2848"></path></svg>
            </el-icon>
            <div class="right-item-text">我的小店</div>
          </div>
        </el-icon>

        <el-avatar :src="userStore.userBasicInfo?.avatarUrl" :icon="UserFilled" fit="fill"></el-avatar>
      </div>
    </el-header>

    <!-- 轮播图区域 -->
    <el-carousel class="main-carousel">
      <el-carousel-item v-for="item in carouselItems" :key="item.id">
        <img :src="item.img" class="carousel-img" alt="banner">
      </el-carousel-item>
    </el-carousel>

    <!-- 商品列表 -->
    <div class="goods-section">
      <h2 class="section-title">
        <el-icon style="font-size: 30px;"><svg t="1748004354458" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21687" width="200" height="200"><path d="M512 901.746939c-13.583673 0-26.122449-4.179592-37.093878-13.061225-8.881633-7.314286-225.697959-175.020408-312.424489-311.379592C133.746939 532.37551 94.040816 471.24898 94.040816 384.522449c0-144.718367 108.146939-262.269388 240.326531-262.269388 67.395918 0 131.657143 30.82449 177.632653 84.636735 45.453061-54.334694 109.191837-84.636735 177.110204-84.636735 132.702041 0 240.326531 117.55102 240.326531 262.269388 0 85.159184-37.093878 143.673469-67.395919 191.216327l-1.044898 1.567346c-86.726531 136.359184-303.542857 304.587755-312.424489 311.379592-10.44898 8.359184-22.987755 13.061224-36.571429 13.061225z" fill="#E5404F" p-id="21688"></path></svg></el-icon>为你推荐
      </h2>
      <el-row :gutter="20">
        <el-col v-for="goods in goodsList" :key="goods.productId" :span="6">
          <el-card class="goods-card" shadow="hover" @click="router.push(`/dislay/product?id=${goods.productId}`)">
            <img :src="goods.coverUrl" class="goods-img" alt="商品图片">
            <div class="goods-info">
              <h3 class="goods-title">{{ goods.title }}</h3>
              <div class="price-area">
                <span class="current-price">¥{{ goods.price }}</span>
                <span class="sales">已售{{ goods.salesVolume }}件</span>
              </div>
              <el-button type="danger" round class="add-btn">加入购物车</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home-container {
  background: #f5f5f5;
  min-height: 100vh;
}

.el-header {
  padding: 8px 20px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;

  &__logo {
    width: 50px;
    height: auto;
    cursor: pointer;
  }

  &__input {
    max-width: 40vw;

    @media (min-width: 768px) {
      width: 30vw;
    }

    @media (min-width: 1024px) {
      width: 25vw;
    }
  }

  &__search-button {

    &:hover {
      background-color: rgb(85, 85, 85);
    }
  }

  &__right {
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 20px;
    user-select: none;

    .right-item {
      cursor: pointer;
      margin-right: 20px;
      color: rgb(220, 215, 215);

      &:hover {
        color: white;
      }

      .right-item-inner-container {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .right-item-icon {
          padding: 0px 10px;
        }

        .right-item-text {
          text-align: center;
          font-weight: bolder;
          font-style: normal;
          font-size: 10px;
        }
      }
    }

    .el-dropdown {
      height: 100%;
      width: auto;
      aspect-ratio: 1/1;

      .el-avatar {
        max-width: 100%;
        max-height: 100%;
        min-width: 100%;
        min-height: 100%;
        cursor: pointer;
      }
    }
  }
}

.el-badge-item {

  ::v-deep(.el-badge__content) {
    font-size: 8px;
    padding: 0px 3px;
  }
}

.main-carousel {
  .carousel-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
  }
}

.goods-section {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;

  .section-title {
    display: flex;
    align-items: center;
    color: #333;
    margin-bottom: 30px;
  }

  .goods-card {
    margin-bottom: 20px;
    transition: transform 0.3s;
    background-color: white;
    border: none;

    &:hover {
      transform: translateY(-5px);
    }

    .goods-img {
      width: 100%;
      height: 280px;
      object-fit: cover;
      border-radius: 4px;
    }

    .goods-info {
      padding: 15px;

      .goods-title {
        color: black;
        font-size: 16px;
        margin-bottom: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .price-area {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;

        .current-price {
          color: #ff3c00;
          font-size: 20px;
          font-weight: bold;
        }

        .sales {
          color: #999;
          font-size: 12px;
        }
      }

      .add-btn {
        width: 100%;
      }
    }
  }
}
</style>